<template>
  <view class="login-wrap">
    <view class="logo">
      <image src="https://ya30images.hbwlife.com/wxmp/logo-yongan30.png" mode=""></image>
    </view>
    <view class="btn-wrap">
      <button class="add-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">绑定手机号</button>
    </view>
    <view class="tips">
      <view class="tip-content">
        <view class="toggle-check" @tap="handleToggle" :class="[active ? 'toggle-active' :'' ]">
          <view class="iconfont icon-duihao_o right" v-show="active"></view>
        </view>
        <view class="tip-data">
          已阅读并同意以下协议:<text class="txt">《用户协议》</text>和<text class="txt">《隐私协议》</text>
        </view>
      </view>
    </view>
    <h-toast></h-toast>
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import {request} from '../../utils/http.js';
export default {
  data() {
    return {
      active: true
    }
  },
  methods: {
    //手机号
    onGetPhoneNumber(e) {
      if (!this.active) {
        Taro.hToast({message: "请先同意协议"})
        return
      }
      const {
        detail: {
          encryptedData,
          iv,
          code
        }
      } = e;
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        let open_id = Taro.getStorageSync('open_id');
        let access_token = Taro.getStorageSync('access_token');
        //console.log("当前code:", code)
        request("/wxaccess/mp/user/getPhoneNumber", {
          "wxphone_code": code,
          "open_id": open_id
        }).then(res => {
          if(res.code == 0) {
            Taro.hToast({
              message: '绑定成功'
            })
            Taro.setStorageSync('open_id', res?.datas?.open_id || '');
            Taro.setStorageSync('user_id', res?.datas?.user_id || '');
            Taro.setStorageSync('access_token', res?.datas?.access_token || '');
            if(res?.datas?.mobile) {
              Taro.setStorageSync('mobile_binded', 1);
            }
            else {
              Taro.setStorageSync('mobile_binded', 0);
            }
            Taro.setStorageSync('mobile', res?.datas.mobile || '');
            Taro.navigateBack()
          }
          else {
            Taro.hToast({
              message: '绑定失败'
            })
          }

        }).catch(err => {
          console.log(err)
          Taro.hToast({
            message: err,
          });
        })
      } else {
        Taro.hToast({message: "为了给您提供更好的服务，请同意获取手机号！"})
      }
    },

    handleToggle() {
      this.active = !this.active
    }
  }
}
</script>

<style lang="less">
@import url('./static/font-alibb/iconfont.css');
.login-wrap {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background: #fff;
  font-size: 32rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  .logo {
    width: 360rpx;
    height: 360rpx;
    margin-top: 20%;

    image {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%
    }
  }

  .btn-wrap {
    padding: 80rpx;
    width: 80%;
  }

  .add-btn {
    border: none;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d5ad57;
    border-radius: 40rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: 400;
  }

  .tips {
    width: 90%;
    font-family: 28rpx;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .txt {
      color: #d5ad57;
    }
  }

  .tip-content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .toggle-check {
    width: 28rpx;
    height: 28rpx;
    border-radius: 50%;
    border: 1px solid #d6d6d6;
    margin-right: 10rpx;
    margin-top: 10rpx;
  }

  .toggle-active {
    background-color: #d5ad57;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #fff;
    border: 1px solid #d5ad57;
  }

  .tip-data {
    flex: 1;
  }
}
</style>
